<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>视频分发</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/common-m.css" />
    <link rel="stylesheet" href="./css/index-vw.css" />
    <!-- <link rel="stylesheet" href="./css/index.css" /> -->
  </head>
  <body>
    <!-- 视频列表页 -->
    <div id="pageList" class="page-container">
      <!-- 头部 -->
      <header class="header flex center">
        <p class="page-title">视频分发</p>
        <img src="./images/icon-back.png" class="icon-back" />
      </header>

      <!-- 数据统计 -->
      <section class="statistics">
        <div class="flex between">
          <p class="section-title flex center">全平台账号数据</p>
          <p class="text-time">更新于2025-05-13 15:44:24</p>
        </div>
        <div class="data-list flex center">
          <div class="data-item flex column">
            <p class="data-num">3</p>
            <p class="data-title">账号管理</p>
          </div>
          <div class="data-item flex column">
            <p class="data-num">7383</p>
            <p class="data-title">全平台粉丝量</p>
          </div>
        </div>
        <div class="data-list2 flex center">
          <div class="data-item flex column">
            <p class="data-num">29929</p>
            <p class="data-title">昨日播放量</p>
          </div>
          <div class="data-item flex column">
            <p class="data-num">9999</p>
            <p class="data-title">昨日点赞量</p>
          </div>
          <div class="data-item flex column">
            <p class="data-num">3,634</p>
            <p class="data-title">昨日评论量</p>
          </div>
        </div>
      </section>
      <section class="section-list">
        <!-- tab -->
        <div class="tab-list flex" id="tabList">
          <div class="tab-item active">快手</div>
          <div class="tab-item">微信视频号</div>
        </div>
        <!-- 视频列表 -->
        <div class="video-list flex wrap" id="videoList">
          <div class="video-item">
            <div class="video-thumb">
              <img
                src="https://q8.itc.cn/images01/20240813/de04114fd13d4ec4acd8a297871bdbce.jpeg"
                class="img-video"
              />
              <div class="cover-box">
                <div class="top-cover flex column">
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                </div>
                <img
                  src="./images/icon-play.png"
                  class="icon-play button-play"
                  data-src="./images/1.mp4"
                />
                <div class="cover-bottom flex around">
                  <div class="info-item flex">
                    <img src="./images/icon-num-play.png" class="icon" />
                    <p class="text-num">5977</p>
                  </div>
                  <div class="info-item flex">
                    <img src="./images/icon-num-zan.png" class="icon" />
                    <p class="text-num">213</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="video-info">
              <p class="text-title ellipsis-2">
                上海地区处理304不锈钢氩弧焊1上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
              </p>
              <p class="text-date">2025-10-05 13:02:26</p>
            </div>
          </div>
          <div class="video-item">
            <div class="video-thumb">
              <img
                src="https://q8.itc.cn/images01/20240813/de04114fd13d4ec4acd8a297871bdbce.jpeg"
                class="img-video"
              />
              <div class="cover-box">
                <div class="top-cover flex column">
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                </div>
                <img
                  src="./images/icon-play.png"
                  class="icon-play button-play"
                  data-src="./images/1.mp4"
                />
                <div class="cover-bottom flex around">
                  <div class="info-item flex">
                    <img src="./images/icon-num-play.png" class="icon" />
                    <p class="text-num">5977</p>
                  </div>
                  <div class="info-item flex">
                    <img src="./images/icon-num-zan.png" class="icon" />
                    <p class="text-num">213</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="video-info">
              <p class="text-title ellipsis-2">
                上海地区处理304不锈钢氩弧焊1上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
              </p>
              <p class="text-date">2025-10-05 13:02:26</p>
            </div>
          </div>
          <div class="video-item">
            <div class="video-thumb">
              <img
                src="https://q8.itc.cn/images01/20240813/de04114fd13d4ec4acd8a297871bdbce.jpeg"
                class="img-video"
              />
              <div class="cover-box">
                <div class="top-cover flex column">
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                </div>
                <img
                  src="./images/icon-play.png"
                  class="icon-play button-play"
                  data-src="./images/1.mp4"
                />
                <div class="cover-bottom flex around">
                  <div class="info-item flex">
                    <img src="./images/icon-num-play.png" class="icon" />
                    <p class="text-num">5977</p>
                  </div>
                  <div class="info-item flex">
                    <img src="./images/icon-num-zan.png" class="icon" />
                    <p class="text-num">213</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="video-info">
              <p class="text-title ellipsis-2">
                上海地区处理304不锈钢氩弧焊1上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
              </p>
              <p class="text-date">2025-10-05 13:02:26</p>
            </div>
          </div>
          <div class="video-item">
            <div class="video-thumb">
              <img
                src="https://q8.itc.cn/images01/20240813/de04114fd13d4ec4acd8a297871bdbce.jpeg"
                class="img-video"
              />
              <div class="cover-box">
                <div class="top-cover flex column">
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                </div>
                <img
                  src="./images/icon-play.png"
                  class="icon-play button-play"
                  data-src="./images/1.mp4"
                />
                <div class="cover-bottom flex around">
                  <div class="info-item flex">
                    <img src="./images/icon-num-play.png" class="icon" />
                    <p class="text-num">5977</p>
                  </div>
                  <div class="info-item flex">
                    <img src="./images/icon-num-zan.png" class="icon" />
                    <p class="text-num">213</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="video-info">
              <p class="text-title ellipsis-2">
                上海地区处理304不锈钢氩弧焊1上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
              </p>
              <p class="text-date">2025-10-05 13:02:26</p>
            </div>
          </div>
          <div class="video-item">
            <div class="video-thumb">
              <img
                src="https://q8.itc.cn/images01/20240813/de04114fd13d4ec4acd8a297871bdbce.jpeg"
                class="img-video"
              />
              <div class="cover-box">
                <div class="top-cover flex column">
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                </div>
                <img
                  src="./images/icon-play.png"
                  class="icon-play button-play"
                  data-src="./images/1.mp4"
                />
                <div class="cover-bottom flex around">
                  <div class="info-item flex">
                    <img src="./images/icon-num-play.png" class="icon" />
                    <p class="text-num">5977</p>
                  </div>
                  <div class="info-item flex">
                    <img src="./images/icon-num-zan.png" class="icon" />
                    <p class="text-num">213</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="video-info">
              <p class="text-title ellipsis-2">
                上海地区处理304不锈钢氩弧焊1上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
              </p>
              <p class="text-date">2025-10-05 13:02:26</p>
            </div>
          </div>
          <div class="video-item">
            <div class="video-thumb">
              <img
                src="https://q8.itc.cn/images01/20240813/de04114fd13d4ec4acd8a297871bdbce.jpeg"
                class="img-video"
              />
              <div class="cover-box">
                <div class="top-cover flex column">
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                </div>
                <img
                  src="./images/icon-play.png"
                  class="icon-play button-play"
                  data-src="./images/1.mp4"
                />
                <div class="cover-bottom flex around">
                  <div class="info-item flex">
                    <img src="./images/icon-num-play.png" class="icon" />
                    <p class="text-num">5977</p>
                  </div>
                  <div class="info-item flex">
                    <img src="./images/icon-num-zan.png" class="icon" />
                    <p class="text-num">213</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="video-info">
              <p class="text-title ellipsis-2">
                上海地区处理304不锈钢氩弧焊1上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
              </p>
              <p class="text-date">2025-10-05 13:02:26</p>
            </div>
          </div>
          <div class="video-item">
            <div class="video-thumb">
              <img
                src="https://q8.itc.cn/images01/20240813/de04114fd13d4ec4acd8a297871bdbce.jpeg"
                class="img-video"
              />
              <div class="cover-box">
                <div class="top-cover flex column">
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                </div>
                <img
                  src="./images/icon-play.png"
                  class="icon-play button-play"
                  data-src="./images/1.mp4"
                />
                <div class="cover-bottom flex around">
                  <div class="info-item flex">
                    <img src="./images/icon-num-play.png" class="icon" />
                    <p class="text-num">5977</p>
                  </div>
                  <div class="info-item flex">
                    <img src="./images/icon-num-zan.png" class="icon" />
                    <p class="text-num">213</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="video-info">
              <p class="text-title ellipsis-2">
                上海地区处理304不锈钢氩弧焊1上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
              </p>
              <p class="text-date">2025-10-05 13:02:26</p>
            </div>
          </div>
          <div class="video-item">
            <div class="video-thumb">
              <img
                src="https://q8.itc.cn/images01/20240813/de04114fd13d4ec4acd8a297871bdbce.jpeg"
                class="img-video"
              />
              <div class="cover-box">
                <div class="top-cover flex column">
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                </div>
                <img
                  src="./images/icon-play.png"
                  class="icon-play button-play"
                  data-src="./images/1.mp4"
                />
                <div class="cover-bottom flex around">
                  <div class="info-item flex">
                    <img src="./images/icon-num-play.png" class="icon" />
                    <p class="text-num">5977</p>
                  </div>
                  <div class="info-item flex">
                    <img src="./images/icon-num-zan.png" class="icon" />
                    <p class="text-num">213</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="video-info">
              <p class="text-title ellipsis-2">
                上海地区处理304不锈钢氩弧焊1上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
              </p>
              <p class="text-date">2025-10-05 13:02:26</p>
            </div>
          </div>
          <div class="video-item">
            <div class="video-thumb">
              <img
                src="https://q8.itc.cn/images01/20240813/de04114fd13d4ec4acd8a297871bdbce.jpeg"
                class="img-video"
              />
              <div class="cover-box">
                <div class="top-cover flex column">
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                </div>
                <img
                  src="./images/icon-play.png"
                  class="icon-play button-play"
                  data-src="./images/1.mp4"
                />
                <div class="cover-bottom flex around">
                  <div class="info-item flex">
                    <img src="./images/icon-num-play.png" class="icon" />
                    <p class="text-num">5977</p>
                  </div>
                  <div class="info-item flex">
                    <img src="./images/icon-num-zan.png" class="icon" />
                    <p class="text-num">213</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="video-info">
              <p class="text-title ellipsis-2">
                上海地区处理304不锈钢氩弧焊1上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
              </p>
              <p class="text-date">2025-10-05 13:02:26</p>
            </div>
          </div>
          <div class="video-item">
            <div class="video-thumb">
              <img
                src="https://q8.itc.cn/images01/20240813/de04114fd13d4ec4acd8a297871bdbce.jpeg"
                class="img-video"
              />
              <div class="cover-box">
                <div class="top-cover flex column">
                  <img
                    src="./images/icon-delete.png"
                    class="icon-button icon-delete"
                  />
                  <img
                    src="./images/icon-edit.png"
                    class="icon-button icon-edit"
                  />
                </div>
                <img
                  src="./images/icon-play.png"
                  class="icon-play button-play"
                  data-src="./images/1.mp4"
                />
                <div class="cover-bottom flex around">
                  <div class="info-item flex">
                    <img src="./images/icon-num-play.png" class="icon" />
                    <p class="text-num">5977</p>
                  </div>
                  <div class="info-item flex">
                    <img src="./images/icon-num-zan.png" class="icon" />
                    <p class="text-num">213</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="video-info">
              <p class="text-title ellipsis-2">
                上海地区处理304不锈钢氩弧焊1上海地区处理304不锈钢氩弧焊1.0mm焊丝1卷30公斤
              </p>
              <p class="text-date">2025-10-05 13:02:26</p>
            </div>
          </div>
        </div>
        <!-- 加载中的提示 -->
        <p id="textTip" class="text-tip"></p>
      </section>

      <!-- 悬浮：发布视频 -->
      <div id="floatpublish" class="float-box">
        <img src="./images/float.png" class="icon-float" />
        <input
          type="file"
          accept="video/*"
          class="video-input"
          id="videoInput"
        />
      </div>
    </div>

    <!-- 发布视频页 -->
    <div id="pagePublish" class="page-container" hidden>
      <!-- 头部 -->
      <header class="header flex center">
        <img src="./images/icon-back.png" class="icon-back" />
        <p class="page-title">发布视频</p>
        <div id="buttonPublish" class="button button-publish">发布</div>
      </header>
      <!-- 表单 -->
      <form class="form">
        <div class="form-item">
          <video
            id="formVideo"
            class="form-video"
            width="100%"
            controls
            muted
            preload="metadata"
            autoplay
            poster=""
          ></video>
          <img id="videoPoster" src="" alt="" width="50%" />
        </div>
        <div class="form-item item-input">
          <input
            type="text"
            id="inputTitle"
            name="title"
            placeholder="请输入作品标题"
            maxlength="50"
          />
          <p id="titleCount" class="input-count">0/50</p>
        </div>
        <div class="form-item item-textarea">
          <div class="textarea-box">
            <textarea
              id="textareaDesc"
              name="desc"
              placeholder="请输入视频简介"
              maxlength="200"
            ></textarea>
            <p id="descCount" class="input-count">0/200</p>
          </div>
        </div>
        <div class="form-item item-checkbox">
          <div class="label">选择平台</div>
          <div class="checkbox-box">
            <img
              src="./images/logo-kuaishou.png"
              class="checkbox logo checked"
              data-type="kuaishou"
            />
            <img
              src="./images/logo-shipinhao.png"
              class="checkbox logo checked"
              data-type="shipinhao"
            />
          </div>
          <p id="errorPlatform" class="form-error" hidden>* 请选择平台</p>
        </div>
      </form>
    </div>

    <!-- 视频预览弹窗 -->
    <div id="videoPopup" class="popup-container" hidden>
      <div class="popup-mask">
        <div class="popup-content">
          <video id="popupVideo" controls></video>
          <div class="popup-close" id="closePopup">&times;</div>
        </div>
      </div>
    </div>

    <!-- 平台授权弹窗 -->
    <div id="authPopup" class="popup-container" hidden>
      <div class="popup-mask">
        <div class="popup-content flex column">
          <img src="./images/popup-kuaishou.png" class="popup-logo" />
          <div class="popup-text">
            <p class="text-1 text-name">快手权限未开启</p>
            <p class="text-2">
              为确保您视频顺利发布<br />
              请您开启权限
            </p>
          </div>
          <div class="popup-button">
            <a href="https://www.feijiu.net" class="button primary button-link"
              >去授权</a
            >
            <div class="button text" ontouchend="$('#authPopup').hide()">
              残忍拒绝
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- toast -->
    <div id="toast" class="toast" hidden></div>

    <script src="./js/jquery-3.2.1.min.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
